<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

<body>
	<div id="app">
		<span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定提示信息~
        </span>
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <ol>
            <li v-for="todo in todos">
                  {{todo.text}}
            </li>
        </ol>
      </div>
     
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
            todos: [
                {text: '学习 Javascrip'},
                {text: '学习 Vue'},
                {text: '整个牛项目'}
            ],
            seen:true,
			message: '页面加载于' + new Date().toLocaleString()
		},
        methods:{
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
	})
</script>
</html>